<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :title="getTitle"
    width="50%"
    @ok="handleSubmit"
    @close="close"
  >
    <BasicForm @register="registerForm">
      <template #addressShow="{ model, field }">
        <a-input v-model:value="model[field]" disabled>
          <template #addonAfter>
            <a-button type="primary" @click="showMap">地址</a-button>
          </template>
        </a-input>
      </template>
    </BasicForm>
  </BasicDrawer>
  <BasicModal v-model:visible="visible" title="选择位置" @ok="handleOk" width="800px">
    <Map
      ref="childComp"
      :searchMap="searchMap"
      :isClick="isClick"
      :serviceAddress="address"
      :lat="latitude"
      :lng="longitude"
    />
  </BasicModal>
</template>
<script lang="ts">
import { defineComponent, ref, computed, unref, reactive, toRefs, nextTick } from 'vue';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from './tableData';
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
import { BasicModal } from '/@/components/Modal';
import Map from '/@/components/Map/Map.vue';
import { message } from 'ant-design-vue';
import moment from 'moment';
export default defineComponent({
  name: 'PostDrawer',
  components: { BasicDrawer, BasicForm, BasicModal, Map, message },
  props: {
    type: {
      type: String,
      default: () => {
        return 'add';
      },
    },
    projectId: {
      type: Number,
      default: () => {
        return null;
      },
    },
  },
  emits: ['success', 'register'],
  setup(props, { emit }) {
    const isUpdate = ref(true);
    const childComp = ref(null);
    const data: any = reactive({
      visible: false,
      searchMap: true,
      isClick: true,
      longitude: 0,
      latitude: 0,
      address: '',
    });
    const [registerForm, { resetFields, setFieldsValue, updateSchema, validate, setProps }] =
      useForm({
        labelWidth: 100,
        schemas: formSchema,
        showActionButtonGroup: false,
        baseColProps: { lg: 12, md: 24 },
      });
    const formId = ref(null);

    const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (formData) => {
      resetFields();
      setProps({
        mergeDynamicData: {
          projectId: props.projectId,
        },
      });
      setDrawerProps({ confirmLoading: false });
      isUpdate.value = !!formData?.isUpdate;
      formId.value = props.type === 'edit' ? formData.record.id : null;

      if (unref(isUpdate)) {
        (data.longitude = formData.record.longitude),
          (data.latitude = formData.record.latitude),
          (data.address = formData.record.address),
        setFieldsValue({
          ...formData.record,
          effectGraphFileUrl: [formData.record.effectGraphFileUrl],
          planarGraphFileUrl: [formData.record.planarGraphFileUrl],
          planStartTime: moment(formData.record.planStartTime).format('x'),
          planEndTime: moment(formData.record.planEndTime).format('x'),
          typeAll: { label: formData.record.typeVal, value: formData.record.type },
          // longitude: data.longitude,
          // latitude: data.latitude,
        });
      }
    });

    //关闭抽屉
    function close() {
      data.longitude = 0;
      data.latitude = 0;
      data.address = '';
      setDrawerProps({ confirmLoading: false });
      console.log('我是关闭');
    }

    //获取位置信息
    function getFn(val) {
      // data.mapInfo = val;
      // data.address = val.address;
      // if(!val.address || !val.lat || !val.lng){
      //   data.btnState = false;
      //   message.warning('请刷新页面重新获取定位');
      // }
    }
    //展示地图
    function showMap() {
      data.visible = true;
    }

    //弹框点击确定
    const handleOk = () => {
      let info = childComp.value.data;
      if (info && info.lat && info.lng) {
        data.longitude = info.lng;
        data.latitude = info.lat;
        data.address = info.address;
      }
      setFieldsValue({
        address: data.address,
      });
      data.visible = false;
    };
    const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));

    async function handleSubmit() {
      try {
        const values = await validate();
        setDrawerProps({ confirmLoading: true });
        let params = { ...values };
        params.effectGraphFileUrl = params.effectGraphFileUrl[0];
        params.planarGraphFileUrl = params.planarGraphFileUrl[0];
        params.effectGraphFileId = 0;
        params.planarGraphFileId = 0;
        params.longitude = data.longitude;
        params.latitude = data.latitude;
        params.type = params.typeAll.value;
        params.typeVal = params.typeAll.label;
        delete params.typeAll;
        if (params.planEndTime < params.planStartTime) {
          message.warning('结束时间不能小于开始时间');
          return;
        }

        if (formId.value) {
          params.id = formId.value;
        }
        emit('success', params);
      } finally {
        setDrawerProps({ confirmLoading: false });
      }
    }

    return {
      registerDrawer,
      registerForm,
      getTitle,
      handleSubmit,
      ...toRefs(data),
      showMap,
      handleOk,
      getFn,
      childComp,
      close,
    };
  },
});
</script>
<style lang="less" scoped>
::v-deep(.ant-input-group-addon) {
  padding: 0 !important;
}
</style>
